<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link
      href="framework/font-awesome/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <link href="framework/reset.css" rel="stylesheet" />
    <link href="framework/icon.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
    <script src="js/index.js"></script>
    <title>饿了么 首页</title>
  </head>
  <body>
    <!-- 总容器 -->
    <div class="wrapper">
      <!-- header部分 -->
      <header>
        <div class="icon-location-box">
          <div class="icon-location"></div>
        </div>
        <div class="location-text">
          沈阳市规划大厦<i class="fa fa-caret-down"></i>
        </div>
      </header>
      <!-- search部分 -->
      <!-- 
搜索框部分（此块与search-fixed-top块宽度高度一致，用于当
search-fixed-top块固定后，挡住下面块不要窜上去） -->
      <div class="search">
        <!-- 当滚动条超过上面的定位块时，search-fixed-top块变成固定在顶部。 -->
        <div class="search-fixed-top" id="fixedBox">
          <!-- 搜索框部分中间的白框 -->
          <div class="search-box">
            <i class="fa fa-search"></i>搜索饿了么商家、商品名称
          </div>
        </div>
      </div>

      <!-- 点餐分类部分 -->
      <ul class="foodtype">
        <li onclick="location.href='businessList.html'">
          <img src="img/dcfl01.png" />
          <p>美食</p>
        </li>
        <li onclick="location.href='businessList.html'">
          <img src="img/dcfl02.png" />
          <p>早餐</p>
        </li>
        <li onclick="location.href='businessList.html'">
          <img src="img/dcfl03.png" />
          <p>跑腿代购</p>
        </li>
        <li onclick="location.href='businessList.html'">
          <img src="img/dcfl04.png" />
          <p>汉堡披萨</p>
        </li>
        <li onclick="location.href='businessList.html'">
          <img src="img/dcfl05.png" />
          <p>甜品饮品</p>
        </li>
        <li onclick="location.href='businessList.html'">
          <img src="img/dcfl06.png" />
          <p>速食简餐</p>
        </li>
        <li onclick="location.href='businessList.html'">
          <img src="img/dcfl07.png" />
          <p>地方小吃</p>
        </li>
        <li onclick="location.href='businessList.html'">
          <img src="img/dcfl08.png" />
          <p>米粉面馆</p>
        </li>
        <li onclick="location.href='businessList.html'">
          <img src="img/dcfl09.png" />
          <p>包子粥铺</p>
        </li>
        <li onclick="location.href='businessList.html'">
          <img src="img/dcfl10.png" />
          <p>炸鸡炸串</p>
        </li>
      </ul>

      <!-- 横幅广告部分 -->
      <div class="banner">
        <h3>品质套餐</h3>
        <p>搭配齐全吃得好</p>
        <a>立即抢购 &gt;</a>
      </div>

      <!-- 超级会员部分 -->
      <div class="supermember">
        <div class="left">
          <img src="img/super_member.png" />
          <h3>超级会员</h3>
          <p>&#8226; 每月享超值权益</p>
        </div>
        <div class="right">立即开通 &gt;</div>
      </div>

      <!-- 推荐商家部分 -->
      <div class="recommend">
        <div class="recommend-line"></div>
        <p>推荐商家</p>
        <div class="recommend-line"></div>
      </div>

      <!-- 推荐方式部分 -->
      <ul class="recommendtype">
        <li>综合排序<i class="fa fa-caret-down"></i></li>
        <li>距离最近</li>
        <li>销量最高</li>
        <li>筛选<i class="fa fa-filter"></i></li>
      </ul>

      <!-- 推荐商家列表部分 -->
      <ul class="business">
        <li>
          <img src="img/sj01.png" />
          <div class="business-info">
            <div class="business-info-h">
              <h3>万家饺子（软件园E18店）</h3>
              <div class="business-info-like">&#8226;</div>
            </div>
            <div class="business-info-star">
              <div class="business-info-star-left">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <p>4.9 月售345单</p>
              </div>
              <div class="business-info-star-right">蜂鸟专送</div>
            </div>
            <div class="business-info-delivery">
              <p>&#165;15起送 | &#165;3配送</p>
              <p>3.22km | 30分钟</p>
            </div>
            <div class="business-info-explain">
              <div>各种饺子</div>
            </div>
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
                <div class="business-info-promotion-left-incon">新</div>
                <p>饿了么新用户首单立减9元</p>
              </div>
              <div class="business-info-promotion-right">
                <p>2个活动</p>
                <i class="fa fa-caret-down"></i>
              </div>
            </div>
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
                <div
                  class="business-info-promotion-left-incon"
                  style="background-color: #f1884f"
                >
                  特
                </div>
                <p>特价商品5元起</p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <img src="img/sj02.png" />
          <div class="business-info">
            <div class="business-info-h">
              <h3>小锅饭豆腐馆（全运店）</h3>
              <div class="business-info-like">&#8226;</div>
            </div>
            <div class="business-info-star">
              <div class="business-info-star-left">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <p>4.9 月售345单</p>
              </div>
              <div class="business-info-star-right">蜂鸟专送</div>
            </div>
            <div class="business-info-delivery">
              <p>&#165;15起送 | &#165;3配送</p>
              <p>3.22km | 30分钟</p>
            </div>
            <div class="business-info-explain">
              <div>各种饺子</div>
            </div>
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
                <div class="business-info-promotion-left-incon">新</div>
                <p>饿了么新用户首单立减9元</p>
              </div>
              <div class="business-info-promotion-right">
                <p>2个活动</p>
                <i class="fa fa-caret-down"></i>
              </div>
            </div>
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
                <div class="business-info-promotion-left-incon">特</div>
                <p>特价商品5元起</p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <img src="img/sj03.png" />
          <div class="business-info">
            <div class="business-info-h">
              <h3>麦当劳麦乐送（全运路店）</h3>
              <div class="business-info-like">&#8226;</div>
            </div>
            <div class="business-info-star">
              <div class="business-info-star-left">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <p>4.9 月售345单</p>
              </div>
              <div class="business-info-star-right">蜂鸟专送</div>
            </div>
            <div class="business-info-delivery">
              <p>&#165;15起送 | &#165;3配送</p>
              <p>3.22km | 30分钟</p>
            </div>
            <div class="business-info-explain">
              <div>各种饺子</div>
            </div>
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
                <div class="business-info-promotion-left-incon">新</div>
                <p>饿了么新用户首单立减9元</p>
              </div>
              <div class="business-info-promotion-right">
                <p>2个活动</p>
                <i class="fa fa-caret-down"></i>
              </div>
            </div>
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
                <div class="business-info-promotion-left-incon">特</div>
                <p>特价商品5元起</p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <img src="img/sj04.png" />
          <div class="business-info">
            <div class="business-info-h">
              <h3>米村拌饭（浑南店）</h3>
              <div class="business-info-like">&#8226;</div>
            </div>
            <div class="business-info-star">
              <div class="business-info-star-left">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <p>4.9 月售345单</p>
              </div>
              <div class="business-info-star-right">蜂鸟专送</div>
            </div>
            <div class="business-info-delivery">
              <p>&#165;15起送 | &#165;3配送</p>
              <p>3.22km | 30分钟</p>
            </div>
            <div class="business-info-explain">
              <div>各种饺子</div>
            </div>
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
                <div class="business-info-promotion-left-incon">新</div>
                <p>饿了么新用户首单立减9元</p>
              </div>
              <div class="business-info-promotion-right">
                <p>2个活动</p>
                <i class="fa fa-caret-down"></i>
              </div>
            </div>
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
                <div class="business-info-promotion-left-incon">特</div>
                <p>特价商品5元起</p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <img src="img/sj05.png" />
          <div class="business-info">
            <div class="business-info-h">
              <h3>申记串道（中海康城店）</h3>
              <div class="business-info-like">&#8226;</div>
            </div>
            <div class="business-info-star">
              <div class="business-info-star-left">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <p>4.9 月售345单</p>
              </div>
              <div class="business-info-star-right">蜂鸟专送</div>
            </div>
            <div class="business-info-delivery">
              <p>&#165;15起送 | &#165;3配送</p>
              <p>3.22km | 30分钟</p>
            </div>
            <div class="business-info-explain">
              <div>各种饺子</div>
            </div>
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
                <div class="business-info-promotion-left-incon">新</div>
                <p>饿了么新用户首单立减9元</p>
              </div>
              <div class="business-info-promotion-right">
                <p>2个活动</p>
                <i class="fa fa-caret-down"></i>
              </div>
            </div>
            <div class="business-info-promotion">
              <div class="business-info-promotion-left">
                <div class="business-info-promotion-left-incon">特</div>
                <p>特价商品5元起</p>
              </div>
            </div>
          </div>
        </li>
      </ul>

      <!-- 底部菜单部分 -->
      <ul class="footer">
        <li onclick="location.href='index.html'">
          <i class="fa fa-home"></i>
          <p>首页</p>
        </li>
        <li>
          <i class="fa fa-compass"></i>
          <p>发现</p>
        </li>
        <li onclick="location.href='orderList.html'">
          <i class="fa fa-file-text-o"></i>
          <p>订单</p>
        </li>
        <li>
          <i class="fa fa-user-o"></i>
          <p>我的</p>
        </li>
      </ul>
    </div>
  </body>
</html>
